<!--
 * @Author: HeAo
 * @Date: 2021-12-30 08:33:04
 * @LastEditTime: 2022-01-06 11:03:45
 * @LastEditors: HeAo
 * @Description: 
 * @FilePath: \briup-webui-1group-teamwork\am-ui\src\pages\am\monitor\History.vue
 * 别乱动！
-->
<template>
  <div class="history">
    <div class="content">
      <div class="left">
        <!-- 工程设备树 -->
        <el-tree
          :data="edTree"
          :props="props"
          @node-click="handleNodeClick"
        ></el-tree>
      </div>
      <div class="right">
        <div v-if="!params.device_id" class="notice">请先选择工程下的设备</div>
        <div v-else>
          <!-- 按钮区域 -->
          <div class="btns">
            <el-button type="primary" size="small" style="float: right"
              >下载</el-button
            >
            <el-form
              :inline="true"
              :model="params"
              size="small"
              class="demo-form-inline"
            >
              <el-form-item>
                <el-date-picker
                  v-model="dataTime"
                  type="datetimerange"
                  value-format="timestamp"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                >
                </el-date-picker>
              </el-form-item>
              <el-form-item>
                <el-button
                  icon="el-icon-search"
                  type="primary"
                  @click="toSearchHandler"
                  >查询</el-button
                >
              </el-form-item>
            </el-form>
          </div>
          <!-- 表格区域 -->
          <el-table :data="historyData.list" style="width: 100%">
            <el-table-column prop="insert_time" label="日期" width="180">
              <template v-slot="{ row }">
                <span>{{ row.insert_time | fmtTime }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="tsp" label="tsp" width="80">
            </el-table-column>
            <el-table-column prop="pm10" label="pm10"> </el-table-column>
            <el-table-column prop="pm25" label="pm2.5"> </el-table-column>
            <el-table-column prop="temperature" label="温度"> </el-table-column>
            <el-table-column prop="wind_direction" label="风向">
            </el-table-column>
            <el-table-column prop="wind_speed" label="风速"> </el-table-column>
          </el-table>
          <!-- 分页组件区域 -->
          <el-pagination
            background
            style="margin-top: 1em"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="parseInt(historyData.page)"
            :page-sizes="[5, 10, 15, 20]"
            :page-size="parseInt(historyData.pageSize)"
            layout="total, sizes, prev, pager, next, jumper"
            :total="parseInt(historyData.total)"
          >
          </el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { get } from "@/utils/request.js";
export default {
  data() {
    return {
      edTree: [],
      props: {
        label: "name",
        value: "id",
      },
      params: {
        page: 1,
        pageSize: 50,
      },
      historyData: {},
      keyWords: "",
      dataTime: "",
    };
  },
  methods: {
    //树形节点点击事件
    handleNodeClick(data) {
      // 判断用户点击的是否是设备，点击工程时不查询数据
      if (data.engineer_id) {
        this.params = {
          ...this.params,
          engineer_id: data.engineer_id,
          device_id: data.id,
        };
        // 调用请求数据的方法
        this.queryHistoryData();
      }
    },
    // 查询工程设备树
    findEngineerDeviceTree() {
      get("/engineer/findEngineerDeviceTree").then((res) => {
        this.edTree = res.data;
      });
    },
    //查询历史数据
    queryHistoryData() {
      get("/monitor/pageQuery", this.params).then((res) => {
        console.log(res.data);
        this.historyData = res.data;
        this.params.begin_time = null;
        this.params.end_time = null;
      });
    },
    // 搜索按钮点击事件
    toSearchHandler() {
      this.params = {
        ...this.params,
        begin_time: this.dataTime[0],
        end_time: this.dataTime[1],
      };
      this.queryHistoryData();
    },
    //分页
    handleSizeChange(pageSize) {
      this.params.pageSize = pageSize;
      this.queryHistoryData();
    },
    handleCurrentChange(page) {
      this.params.page = page;
      this.queryHistoryData();
    },
  },
  created() {
    //查询工程设备树
    this.findEngineerDeviceTree();
    this.queryHistoryData();
  },
};
</script>
<style>
.content {
  display: flex;
  /* text-align: center; */
  font-size: 30px;
  color: #999;
}
.left {
  width: 30%;
  border-right: 1px solid #b9b7b7;
  padding-right: 20px;
  margin-right: 20px;
}
.right {
  width: 70%;
}
</style>